<template>
  <div class="leafletmap">
    <mapv-block 
    :circleMarkerList="circleMarkerList"
    :pointList="pointList"
    :polylineList="polylineList"
    :circleList="circleList"
    :center="center"
    :zoom="zoom"></mapv-block>
  </div>
</template>

<script>
export default {
  name: 'VueLeafletTest.vue',
  components: {
		MapvBlock: () => import('@/components/mapv-block')
	},
  data () {
    return {
      zoom: 9,
      center: {lat: 29.751342, lng: 106.642792},
      pointList:[
        {lat:30.1,lng:106,name:"示例点1"},{lat:30.2,lng:106,name:"示例点2"},{lat:30.3,lng:106,name:"示例点3"}, 
      ],
      polylineList:[
        {latlngs:[[30.1,106],[40.2,85]],color:"red"},
        {latlngs:[[30,106],[30.2,85]],color:"yellow"} 
      ],
      circleMarkerList:[
        {center: [30,106],radius: 6,color: 'red'},
        {center: [35,106],radius: 7,color: 'green',title:"点标题"},
      ],
      circleList:[
        {center: [30,107],radius: 5500,color: 'red'},
        {center: [35,107],radius: 5500,color: 'yellow',title:"圆圈标题"},
      ],
      text: ''
    }
  },
}
</script>

<style scoped>
.leafletmap{
	height: 100%;
  width: 100%; 
}
</style>
